<template>
  <div class="userinfo-page">
    <el-card class="box-card">
      <el-form
        ref="form-userinfo"
        class="form-search"
        :inline="true"
        :model="formData"
        label-width="80px"
      >
        <el-form-item label="活动名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-button type="info">重置</el-button>
        <el-button type="primary">搜索</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <el-table
        :data="dataList"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </el-card>

    <el-card>
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { USER_INFO } from "@/axios/api";

export default {
  components: {},
  data() {
    return {
      title: "",
      dataList: [],
      formData: {},
    };
  },
  computed: {},
  watch: {},
  methods: {
    async getListData() {
      let data = await this.$axios.get(USER_INFO);
      console.log(data);
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
  created() {
    this.title = this.$route.meta.title;
  },
  mounted() {
    this.getListData();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang="less" scoped>
.box-card {
  text-align: left;
  margin: 10px 0;
}
.form-search {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>